<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/admin/bootstrap4/css/bootstrap.css}">
    <script th:src="@{/admin/bootstrap4/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/admin/bootstrap4/js/bootstrap.js}"></script>

</head>

<body>
<br>
<div style="width:80%;height: 600px;margin-left:10% ;">

    <a type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalId2">添加公告</a><br><br>
    <table class="table">
        <thead class="bg-dark" style="color: white">
        <tr>
            <th scope="col">公告ID</th>
            <th scope="col">公告名称</th>
            <th scope="col">公告内容</th>
            <th scope="col">发布时间</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="notice:${noticeList}" class="text-center my-auto mx-auto">
            <th scope="row" th:text="${notice.noticeId}"></th>
            <td th:text="${notice.noticeName}"></td>
            <td th:text="${#strings.abbreviate(notice.noticeContent,70)}"></td>
<!--            <td th:text="${notice.noticeContent}"></td>-->
            <td th:text="${notice.noticeAddtime}"></td>

            <td>
                <a type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalId" th:onclick="test([[${notice.noticeId}]],[[${notice.noticeName}]],[[${notice.noticeContent}]])">修改</a>
                <a type="button" class="btn btn-danger"  th:href="@{/admin/delNotice(noticeid=${notice.noticeId})}">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- 修改图片以外的信息的模态框 -->
    <div class="modal fade" id="ModalId" tabindex="-1" role="dialog"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">修改课程信息</h4>
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <!-- 内容主体begin -->
                    <form id="updateForm" th:action="@{/admin/modNotice}" method="post">
                        <input type="hidden" name="noticeId">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" >公告名称</span>
                            </div>
                            <input type="text" id="a" class="form-control" placeholder="公告名称" name="noticeName" aria-label="Username" aria-describedby="basic-addon1">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">公告内容</span>
                            </div>
                            <textarea type="text" id="textarea" class="form-control" placeholder="公告内容" name="noticeContent" aria-label="Username" aria-describedby="basic-addon1"></textarea>
                        </div>
                    </form>
                    <!-- 内容主体end -->
                </div>
                <div class="modal-footer">
                    <button form="updateForm" type="submit" class="btn btn-primary" id="ModalYesId">修改</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>



    <!-- 添加课程的模态框 -->
    <div class="modal fade" id="ModalId2" tabindex="-1" role="dialog"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel2">添加公告</h4>
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <!-- 内容主体begin -->
                    <form id="addForm" th:action="@{/admin/addNotice}" method="post">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1">公告名称</span>
                            </div>
                            <input type="text" class="form-control" placeholder="公告名称" name="noticeName" aria-label="Username" aria-describedby="basic-addon1">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">公告内容</span>
                            </div>
                            <textarea type="text" class="form-control" placeholder="课程描述" name="noticeContent" aria-label="Username" aria-describedby="basic-addon1"></textarea>
                        </div>
                        <br>
                    </form>
                    <!-- 内容主体end -->
                </div>
                <div class="modal-footer">
                    <button form="addForm" type="submit" class="btn btn-primary" id="ModalYesId2">添加</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script>

    function test(noticeId,noticeName,noticeContent){
        console.log(noticeId,noticeName,noticeContent)
        $("[name='noticeId']").attr("value",noticeId)
        $("[id='a']").attr("value",noticeName)
        document.getElementById("textarea").innerText=noticeContent
    }
</script>
</html>